@import models.Tables.GenomeRow
@import models.Tables.EpigeneticsRow
@import models.Tables.SnpRow
@(row: Option[GenomeRow], geneid: String,info:Map[String,String], epigs: Seq[EpigeneticsRow], snps: Seq[SnpRow])
@epigMap = @{
    epigs.groupBy(_.epigType)
}
@epigType = @{
    epigMap.keys.mkString(",")
}
@config.main(geneid) {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>
            table {
                white-space: normal !important;
            }

            th {
                width: 20%;
            }

    </style>
    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Gene ID: " + geneid, "Browse", "/capdb/browse/browsePage")

            <div class="main-body">

                @if(row.nonEmpty) {

                    <table class="table table-hover table-bordered">
                        <tbody>
                            <tr><th>Species </th><td colspan="3">@row.get.species</td></tr>
                            <tr><th>CuGenDB </th><td colspan="3"><a href="http://cucurbitgenomics.org/feature/gene/@{row.get.geneid}" target="_blank">@{row.get.geneid}</a></td></tr>


                            <tr>
                                <th>Location</th>
                                <td colspan="3"> @{info("chr")} : @{info("start")}-@{info("end")}(@{info("strand")})</td>
                            </tr>

                            <tr>
                                <th>Genome Browser</th>
                                <td colspan="3"> <a href="http://cucume.cn:8080/?data=my_data/Cap/@{row.get.geneid.take(2)}/data&loc=@{info("chr")}:@{info("start")}..@{info("end")}&tracks=DNA,Annotation,MeRIP" target="_blank">@{info("chr")}:@{info("start")}..@{info("end")}</a></td>
                            </tr>

                            <tr><th>Function </th><td colspan="3"> @{row.get.func}</td></tr>

                            <tr>
                                <th>Mobile RNA </th>
                                <td style="width: 30%"> @{row.get.rna}</td>
                                <th>TLS </th>
                                <td style="width: 30%"> @{row.get.tls}</td>
                            </tr>
                            <tr>
                                <th>m<sup>5</sup>C adult plant</th>
                                <td> @{row.get.m5g}</td>
                                <th>m<sup>5</sup>C vascular</th>
                                <td> @{row.get.m5p}</td>
                            </tr>
                            <tr>
                                <th>m<sup>6</sup>A adult plant</th>
                                <td> @{row.get.m6g}</td>
                                <th>m<sup>6</sup>A vascular</th>
                                <td> @{row.get.m6p}</td>
                            </tr>

@*                            <tr><th>Function </th><td>@row.get.function</td></tr>
                            <tr><th>Mobile Macromolecules</th><td>@row.get.molecules</td></tr>
                            <tr><th>Scion/Stock</th><td>@row.get.stock</td></tr>
                            <tr><th>Move direction</th><td>@row.get.direction</td></tr>
                            <tr><th>Source or tissue</th><td>@row.get.tissue</td></tr>
                            <tr><th>Experiment approach</th><td>@row.get.approach</td></tr>
                            <tr><th>Data type</th><td>@row.get.dataType</td></tr>*@
                        </tbody>
                    </table>
                }

                @for(x <- epigMap) {

                    @components.scrollComponents(x._1) {
                        <div id="tissue" class="box-plot" ></div>
                        <table id="@{
                            x._1
                        }Table" class="table" data-pagination="true" data-advanced-sortable="true"
                        data-page-list="[10]" style="width: 1068px">
                            <thead>
                                <tr>
                                    <th data-sortable="true" data-search-type="text">
                                        Methylation type</th>
                                    <th data-sortable="true" data-search-type="text">
                                        Source or tissue</th>
                                    <th data-sortable="true" data-search-type="text">repeat</th>
                                    <th data-sortable="true" data-search-type="text">Chrom</th>
                                    <th data-sortable="true" data-search-type="text">Start</th>
                                    <th data-sortable="true" data-search-type="text">End</th>
                                    <th data-sortable="true" data-search-type="text">
                                        Experiment approach</th>
                                </tr>
                            </thead>
                            <tbody>
                            @for(y <- x._2) {
                                <tr>
                                    <td>@y.methylation</td>
                                    <td>@y.tissue</td>
                                    <td>@y.repeat</td>
                                    <td>@y.chrom</td>
                                    <td>@y.start</td>
                                    <td>@y.end</td>
                                    <td>@y.approach</td>
                                </tr>
                            }
                            </tbody>
                        </table>
                    }
                }

                @if(snps.nonEmpty) {
                    @components.scrollComponents("SNP") {
                        <div id="tissue" class="box-plot" ></div>
                        <table id="snpTable" class="table" data-pagination="true" data-advanced-sortable="true"
                        data-page-list="[10]" style="width: 1068px">
                            <thead>
                                <tr>
                                    <th data-sortable="true" data-search-type="text">
                                        SNP ID</th>
                                    <th data-sortable="true" data-search-type="text">
                                        Chrom</th>
                                    <th data-sortable="true" data-search-type="text">Loci</th>
                                    <th data-sortable="true" data-search-type="text">Trait</th>
                                    <th data-sortable="true" data-search-type="text">Methylation site</th>
                                </tr>
                            </thead>
                            <tbody>
                            @for(snp <- snps) {
                                <tr>
                                    <td>@snp.snpId</td>
                                    <td>@snp.chrom</td>
                                    <td>@snp.loci</td>
                                    <td>@{
                                        snp.`trait`
                                    }</td>
                                    <td>@snp.site</td>
                                </tr>
                            }
                            </tbody>
                        </table>
                    }
                }


            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>

    <script>

            $(function () {
                const ids = "@epigType".split(",")
                ids.forEach(x => {
                    $("#" + x + "Table").bootstrapTable();
                })


                $("#snpTable").bootstrapTable()


            })


    </script>
}